<template>
    <div class="editor-image">
      <el-button type="primary"  @click="dialogVisible = true">上传图片</el-button>
      <!--modal-append-to-body属性很重要，因为父元素<div class="app">具有position:fixed 在chrome中该属性也会创建一个层叠上下文
          导致内部子元素的z-index比较在app中进行，但el-dialog元素的model层默认放在了body中，导致无法通过z-index大小比较
      -->
      <!--http://www.aliued.com/?p=3130-->
      <el-dialog
        :modal-append-to-body = "false"
        title="提示"
        :visible.sync="dialogVisible"
        :before-close="handleClose">
        <el-upload
          drag
          action="https://httpbin.org/post"
          multiple list-type="picture-card">
          <div class="upload-inner">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
      </el-dialog>
    </div>
</template>

<script>
    export default {
      name: "editor-image",
      data: function () {
        return {
          dialogVisible: false
        }
      },
      methods: {
        handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => {});
        }
      }
    }
</script>

<style lang="scss" scoped>
  .editor-image {
    & /deep/ .el-dialog {
      width: 600px!important;

      & /deep/ .el-dialog__body{
        text-align: center;

        & /deep/ .el-upload {
          width: 100%;

          &.el-upload--picture-card{
            height: 180px;
            border: none;

            &.el-upload-dragger{
              width: 100%;
            }
          }
        }
      }
    }
    .upload-inner {
      text-align: center;

      line-height: 2;
    }
  }
</style>
